<template>
  <div class="me_relevant">
    <div class="item" v-for="item in listData" :key="item.id" v-shrink-on-click @click="handleClick(item.id)">
      <div class="img-wrapper">
        <img v-lazy="item.img" :key="item.img" alt="" />
        <div v-if="item.id === 1 && myEmail.hasNoRead" class="dot"></div>
        <div v-if="item.id === 2 && hasdiscounts" class="dot"></div>
      </div>
      <div class="mine_code">{{ t(item.label) }}</div>
    </div>
  </div>

  <Modal v-model:visible="isShow" :title="t('redeem_enter_code')" @close="code = ''">
    <div class="popup_body">
      <div class="info">{{ t("redeem_tip") }}</div>
      <nut-input v-model="code" :placeholder="t('redeem_please_enter_code')" />
      <!-- <div class="submit" v-shrink-on-click>
        {{ t('paymentManagement_page_confirm') }}
      </div> -->
      <div class="submit_btn">
        <nut-button @click="checkCode" class="btn">{{ t("confirm") }}</nut-button>
      </div>
    </div>
  </Modal>
  <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
</template>

<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from "vue";
import { useRouter } from "vue-router";
import { NetPacket } from "@/netBase/NetPacket";
import { useI18n } from "vue-i18n";
import { User } from "@/store/user";
import pinia from "@/store/index";
import { storeToRefs } from "pinia";
import PKwebsocket from "@/lolo/Ws";

const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
const Toast = defineAsyncComponent(() => import("@/components/Toast.vue"));

const store = User(pinia);
const { myEmail, isLocalLoggedIn } = storeToRefs(store);
const { t } = useI18n();
const isShow = ref(false);
const router = useRouter();
const code = ref();
const showToast = ref(false);
const toast_value = ref("");
const hasdiscounts = ref(false);

const listData = [
  { label: "input_label_email", img: "/imgs/me/email.webp", id: 1 },
  { label: "mine_myoffer", img: "/imgs/me/gift.webp", id: 2 },
  { label: "mine_code", img: "/imgs/me/group.webp", id: 3 },
  { label: "mine_mydelegate", img: "/imgs/me/king.webp", id: 4 },
];

//  点击
const handleClick = (num: number) => {
  switch (num) {
    case 1: // 邮箱
      router.push("/email");
      break;
    case 2: // 我的优惠
      router.push("/myDiscounts");
      break;
    case 3: // 兑换码
      isShow.value = true;
      break;
    case 4: // 代理合作
      // router.push("/agencyCooperation");

      break;

    default:
      break;
  }
};

// 输入兑换码确定
const checkCode = () => {
  if (!code.value) {
    showToast.value = true;
    toast_value.value = "content_required";
    return;
  }
  const query = NetPacket.req_exchange();
  query.code = code.value;
  PKwebsocket.instance.send(query, true, {
    callbackName: "msg_notify_exchange",
    callback: notify_exchange,
  });
};

/**
 * @description  对应返回result  1-8  参数
 * "invalid_ID": "角色不存在",
 *  "redeem_cannot_be_swap": "推广不能充值",
    "exceeded_daily_limit": "超过当天兑换次数限制",
    "activity_not_open": "活动未开始",
    "code_does_not_exist": "兑换码不存在",
    "code_already_used": "该码已经被领取完了",
    "code_exceeded_limit": "该码的领取次数超过限制",
    "code_can_only_used_once": "抱歉，此充值码只能使用一次",
 */
const notify_exchange = (rs: any) => {
  const type_str: any = {
    0: "bank_success",
    1: "invalid_ID",
    2: "redeem_cannot_be_swap",
    3: "exceeded_daily_limit",
    4: "activity_not_open",
    5: "code_does_not_exist",
    6: "code_already_used",
    7: "code_exceeded_limit",
    8: "code_can_only_used_once",
  };
  toast_value.value = type_str[rs.result];

  showToast.value = true;
  if (rs.result == 0) {
    // 兑换成功
    isShow.value = false;
  }
};

// 获取优惠数据
const handleNotify = (rs: any) => {
  const list = ["VIP_related", "System"];
  // 判断是否有未领取的奖励的优惠
  hasdiscounts.value = rs.dis.some((item: any) => list.includes(item.tag));
};

onMounted(() => {
  if (isLocalLoggedIn.value) {
    const query = NetPacket.req_my_recharge_discount();
    PKwebsocket.instance.send(query, true, {
      callbackName: "msg_notify_my_recharge_discount",
      callback: handleNotify,
    });
  }
});
</script>

<style lang="scss" scoped>
.me_relevant {
  padding: 0px 15px;
  display: flex;
  

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    img {
      height: 44px;
      width: 44px;
    }

    .mine_code {
      color: #fcfffa;
      font-size: 12px;
    }

    .img-wrapper {
      position: relative;

      .dot {
        position: absolute;
        top: 0px;
        right: -4px;
        width: 8px;
        height: 8px;
        background-color: #fe4a5e;
        border-radius: 50%;
        animation: refresh 2s linear infinite;
      }

      @keyframes refresh {
        0% {
          opacity: 1;
        }

        50% {
          opacity: 0.3;
        }

        100% {
          opacity: 1;
        }
      }
    }
  }
}

.submit_btn {
  margin: 10px;
  margin-top: 30px;
  display: flex;
  justify-content: center;

  .btn {
    width: 307px;
    height: 44px;
    border-radius: 8px;
  }
}

.popup-header {
  width: calc(100vw - 30px);
  height: 42px;
  line-height: 42px;
  display: flex;
  justify-content: center;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 15px 15px 0px 0px;
  position: relative;
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  background: radial-gradient(87.04% 93.77% at 50% 13.97%,
      #4c36b3 0.17%,
      #3a2786 74.42%,
      #3c279a 100%);

  .close_icon {
    position: absolute;
    right: 10px;
    top: 14px;
  }
}

.popup_body {
  padding: 24px 15px 24px 15px;

  .info {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    margin-bottom: 24px;
  }

  .nut-input {
    box-shadow: 0px 4px 4px 0px #00000040 inset;
    border-radius: 8px;
    border-bottom: unset;
    display: flex;
    justify-content: center;
    background: #1d1c3c;
    padding: 14px 20px;
    box-shadow: 0.5px 0.5px 1px 0px #333260 inset;

    &:deep(.input-text) {
      text-align: left !important;
      font-size: 10px;
      
    }
    &:deep(.nut-input-box) {
    
      line-height: 14px;
    }
  }
}
</style>
